<template>
  <div>
    <navbar theme="transparent-full"></navbar>
    <div class="logo-wrapper">
      <image :src="logoSrc" class="logo"></image>
    </div>
    <div class="login-form">
      <div class="form-row">
        <text class="form-row-icon"></text>
        <xinput placeholder="请输入手机号" type="number" :value.sync="form.phone" class="form-row-control"></xinput>
        <text class="form-row-right"></text>
      </div>
      <div class="form-row">
        <text class="form-row-icon icon" v-if="hidePwd" @click="toggleHidePwd">&#xe61e;</text>
        <text class="form-row-icon icon" v-if="!hidePwd" @click="toggleHidePwd">&#xe73c;</text>
        <xinput placeholder="请输入密码" :value.sync="form.password"
                :type="hidePwd ? 'password' : 'text'" class="form-row-control"></xinput>
        <text class="form-row-text activeable" @click="findPwd">忘记密码</text>
      </div>
      <div class="form-bottom">
        <text
            :class="['btn-primary','btn','btn-large', 'activeable', (!validateOk || loginDoing) && 'btn-disabled', 'login-btn']"
            @click="login">{{loginDoing ? '登录中……' : '登 录'}}
        </text>
      </div>
      <div class="form-row-text">
        <text class="sms-switch-btn activeable" @click="loginByPhone">短信验证码登录</text>
        <text class="register-new-btn  activeable" @click="goToRegister">注册新账号</text>
      </div>
    </div>
    <wxc-loading :show="isLoadingShow"></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  @import "./sass/form";

  .container {
    background-color: #FFFFFF;
  }

  .footerbar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 50px 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    &-icon {
      font-size: 110px;
      &-weixin {
        color: #77bb46;
      }
    }
  }

  .form-row-text {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 15px;
  }

  .form-bottom {
    margin-bottom: 50px;
  }

  .sms-switch-btn {
    color: $color-info;
    font-size: 32px;
    text-align: center;
  }

  .register-new-btn {
    color: $color-warning;
    font-size: 32px;
  }

  .logo {
    width: 154px;
    height: 154px;
    border-radius: 154px;
    &-wrapper {
      justify-content: center;
      align-items: center;
      height: 180px;
    }
  }

  .login-form {
    padding: 0 40px;
    margin-top: 60px;
  }

  .login-wrap {
    margin-top: 50px;
  }

  .login-btn {
    flex: 1;
  }
</style>
<script>
import {WxcLoading} from 'weex-ui'
require('./include/page-xdom')
let api = require('./include/api')
let broadcastChannelKeys = require('./include/broadcast-channel-keys')
let BroadcastChannel = require('./include/broadcast-channel')
let loginResultBroadcastChannel = new BroadcastChannel(broadcastChannelKeys.LOGIN_RESULT)
let registerBroadcastChannel = new BroadcastChannel(broadcastChannelKeys.REGISTER)
let phoneLoginBroadcastChannel = new BroadcastChannel(broadcastChannelKeys.PHONE_LOGIN)
let urlPath = require('./include/url-path')
let navigator = require('./include/xnavigator')
let modal = weex.requireModule('modal')
let config = require('./include/app-config')
let queryParser = require('./include/queryparser')
let platform = require('./include/platform')
module.exports = {
  mixins: [],
  components: {
    navbar: require('./components/navbar.vue'),
    xinput: require('./components/input.vue'),
    WxcLoading
  },
  props: {
    phone: {default: ''}
  },
  data () {
    return {
      logoSrc: urlPath.assets('images/logo_la.png?v=1'),
      hidePwd: true,
      validateOk: false,
      loginDoing: false,
      loginStatus: false,
      weixinLoginListened: false,
      isLoadingShow: false,
      iosShow: false,
      form: {
        phone: '',
        password: '',
        'remember-me': true,
        weixinBindOpenId: ''
      }
    }
  },
  beforeDestroy () {
    // loginBroadcastChannel.postMessage(this.loginStatus)
  },
  created () {
    config.bindConfig(this)
    let queryParams = queryParser(weex.config.bundleUrl)
    this.form.weixinBindOpenId = queryParams.weixinBindOpenId || ''
    this.$watch('form', () => {
      this.validateOk = this.validate()
    }, {deep: true})
  },
  methods: {
    toggleHidePwd () {
      this.hidePwd = !this.hidePwd
    },
    goToRegister () {
      if (platform.isWeb()) {
        navigator.push('register.js')
        return
      }
      navigator.pop().done(() => {

      })
      registerBroadcastChannel.postMessage({
        goRegister: true,
        weixinBindOpenId: this.form.weixinBindOpenId
      })
    },
    validate () {
      if (!this.form.phone || this.form.phone.length !== 11) {
        return false
      }
      if (!this.form.password || this.form.password.length < 6) {
        return false
      }
      return true
    },
    findPwd () {
      navigator.push('forget.js')
    },
    loginByPhone () {
      if (platform.isWeb()) {
        navigator.push('phone-login.js')
        return
      }
      navigator.pop().done(rs => {
        phoneLoginBroadcastChannel.postMessage('login')
      })
    },
    login () {
      if (!this.validateOk || this.loginDoing) {
        return
      }
      this.isLoadingShow = true
      this.loginDoing = true
      api.login.password(this.form).done((rs, res) => {
        this.handleLoginRs(rs)
      }).always(rs => {
        this.loginDoing = false
        this.isLoadingShow = false
      })
    },
    handleLoginRs (rs, res) {
      if (!rs.data.success) {
        modal.alert({message: rs.data.errMsg})
      } else {
        loginResultBroadcastChannel.postMessage(rs.data)
        navigator.pop({animated: false})
      }
    }
  }
}
</script>
